<template>
  <PageLayout full :page-style="pageStyle">
    <!--头部导航-->
    <template #header>
      <HeaderLayout show-back>
        <view>{{ $t('Navigator.My.AfterService.Title.Text') }}</view>
      </HeaderLayout>
    </template>
    <view class="after-service">
      <!--家电列表为空内容-->
      <view class="container" v-if="applianceList.length === 0">
        <view class="set-text-null">{{ $t('Navigator.My.AfterService.Top.Tip.NoAppliance.Title.Text') }}</view>
        <view class="brand-phone-null">
          <!--BOSCH-->
          <view class="brand-class none-class">
            <image class="brand-icon" :src="'/pages/my/static/icon_My_Afterservice_Hotline_BO.png'"></image>

            <view class="brand-phone">{{ $t('Navigator.My.AfterService.Bottom.Dialog.Bosch.Title.Text') }}</view>
            <TrackButton
              track-id="Navigator.My.AfterService.Dialog.ImmediatelyCall.Button.Text"
              :track-data="{ brandName: 'BOSCH' }"
            >
              <view class="call" @click="callBosch">{{
                $t('Navigator.My.AfterService.Dialog.ImmediatelyCall.Button.Text')
              }}</view>
            </TrackButton>
          </view>
          <!--SIEMENS-->
          <view class="brand-class none-class">
            <image class="brand-icon" :src="'/pages/my/static/icon_My_Afterservice_Hotline_SE.png'"></image>
            <view class="brand-phone">{{ $t('Navigator.My.AfterService.Bottom.Dialog.Siemens.Title.Text') }}</view>
            <TrackButton
              track-id="Navigator.My.AfterService.Dialog.ImmediatelyCall.Button.Text"
              :track-data="{ brandName: 'SIEMENS' }"
            >
              <view class="call" @click="callSiemens">{{
                $t('Navigator.My.AfterService.Dialog.ImmediatelyCall.Button.Text')
              }}</view>
            </TrackButton>
          </view>
        </view>
      </view>
      <!--家电列表非空内容-->
      <view class="container" v-else>
        <!--顶部提示：请选择要售后的家电-->
        <view class="top-tip">
          <view class="set-text">{{ $t('Navigator.My.AfterService.Top.Tip.Title.Text') }}</view>
          <view class="service-hotline" @click="callPhone">
            <image class="left-image" :src="'/pages/my/static/Hotline.png'"></image>
            <TrackButton track-id="Navigator.My.AfterService.Top.ServiceHotline.Button.Text">
              <view class="right-text">{{ $t('Navigator.My.AfterService.Top.ServiceHotline.Button.Text') }}</view>
            </TrackButton>
          </view>
        </view>
        <!--家电列表-->
        <view class="appliance-list" @click="choose(appliance)" v-for="appliance in applianceList" wx:key="appliance">
          <view class="cell">
            <!--家电icon-->
            <alt-picture class="left-icon" :src="appliance.picture" />
            <!--家电名称-->
            <view class="right-text">{{ appliance.name }}</view>
          </view>
        </view>
      </view>

      <!-- 打电话弹窗 -->
      <Drawer v-model:show="callPhoneDialogFlag" :title="$t('Navigator.My.AfterService.Bottom.Dialog.Tip.Title.Text')">
        <view class="middle-container">
          <!--BOSCH-->
          <view class="brand-class" v-if="hasBOSCHDevice">
            <image class="brand-icon" :src="'/pages/my/static/icon_My_Afterservice_Hotline_BO.png'"></image>
            <view class="brand-iphone">{{ $t('Navigator.My.AfterService.Bottom.Dialog.Bosch.Title.Text') }}</view>
            <TrackButton
              track-id="Navigator.My.AfterService.Dialog.ImmediatelyCall.Button.Text"
              :track-data="{ brandName: 'BOSCH' }"
            >
              <view class="call" @click="callBosch">{{
                $t('Navigator.My.AfterService.Dialog.ImmediatelyCall.Button.Text')
              }}</view>
            </TrackButton>
          </view>
          <!--SIEMENS-->
          <view class="brand-class" v-if="hasSIEMENSDevice">
            <image class="brand-icon" :src="'/pages/my/static/icon_My_Afterservice_Hotline_SE.png'"></image>
            <view class="brand-iphone">{{ $t('Navigator.My.AfterService.Bottom.Dialog.Siemens.Title.Text') }}</view>
            <TrackButton
              track-id="Navigator.My.AfterService.Dialog.ImmediatelyCall.Button.Text"
              :track-data="{ brandName: 'SIEMENS' }"
            >
              <view class="call" @click="callSiemens">{{
                $t('Navigator.My.AfterService.Dialog.ImmediatelyCall.Button.Text')
              }}</view>
            </TrackButton>
          </view>
          <!--采暖控制器-->
          <view class="tt-class" v-if="hasTTDevice">
            <span class="tt-text">如果您需要咨询采暖控制器的问题，请拨打客服专线：</span>
            <span class="tt-phone" @click="callTT">400 820 6017</span>
          </view>
        </view>
      </Drawer>
      <!-- 博世TT专线弹窗-->
      <Modal
        title="博世舒适科技客服热线"
        :visible="clickTTDevice"
        :cancel-text="$t('APP.Common.Cancel.Text')"
        :ok-text="$t('Navigator.My.AfterService.Dialog.ImmediatelyCall.Button.Text')"
        @ok="callTT"
        @cancel="cancel"
        class="TT-afterService-modal"
      >
        <view class="tt-phone-class"> {{ $t('Navigator.My.AfterService.Bottom.Dialog.TT.Title.Text') }} </view>
      </Modal>
    </view>
  </PageLayout>
</template>

<script setup lang="ts">
import PageLayout from '@/layout/page/page.vue'
import HeaderLayout from '@/layout/page/header.vue'
import Drawer from '@/common/drawer.vue'
import { useEnvStore } from '@/store/env'
import { onShow } from '@dcloudio/uni-app'
import { onLoad } from '@dcloudio/uni-app'
import { getSimpleApplianceList, type SimpleDeviceModel } from '../../../api/afterService'
import netconfig from '@/config/netconfig'
import TrackButton from '@/dataReport/components/TrackButton.vue'
import { showLoading } from '@/utils/mpHelper'
import Modal from '@/common/modal.vue'
import { jumpMP } from '../../../utils/mpHelper'
import { trackEvent, TrackType } from '@/dataReport/tracks'
import { safeTrack } from '@/dataReport/dataReportUtil'
import { AfterServiceProductTypes, getApplianceErrorInfo } from './errorInfo'
const envStore = useEnvStore()
const applianceList = ref<SimpleDeviceModel[]>([])
const callPhoneDialogFlag = ref(false)
const hasTTDevice = ref(false)
const hasSIEMENSDevice = ref(false)
const hasBOSCHDevice = ref(false)
const clickTTDevice = ref(false)
const pageStyle = {
  backgroundColor: '#F4F4F4',
}

onBeforeMount(() => {})
onShow(() => {})

onLoad((options) => {
  showLoading(async () => {
    let res = await getApplianceList()
    if (res.code != 0) {
      uni.showToast({
        title: res.msg,
      })
    }
  })
})

/**
 * 获取家电列表
 */
async function getApplianceList() {
  let res = await getSimpleApplianceList()
  applianceList.value = res.data || []
  applianceList.value.forEach(async (appliance, index) => {
    let pictureUrl = `${netconfig.PHOTO_IMAGE}${appliance.vib}/${appliance.vib}.png`
    // appliance.picture = netconfig.ASSETSPRE + appliance.picture
    appliance.picture = pictureUrl
    // TT设备标识
    if (appliance.type === 'TT') {
      hasTTDevice.value = true
    }
    // 博世设备标识
    if (appliance.brand === 'BOSCH') {
      hasBOSCHDevice.value = true
    }
    // 西门子设备标识
    if (appliance.brand === 'SIEMENS') {
      hasSIEMENSDevice.value = true
    }
  })
  return res
}

/**
 * 点击家电列表
 * @param appliance
 */
function choose(appliance: SimpleDeviceModel) {
  safeTrack(() => {
    trackEvent(
      'check_aftersale_actionhandler',
      {
        appliance_brand: appliance.brand,
        appliance_type: appliance.type,
        appliance_vib: appliance.vib,
        appliance_haid: appliance.haId,
      },
      TrackType.BusinesssScene,
      'My.AfterService.Appliance.Select'
    )
  })
  clickToOtherMP(appliance)
}

async function clickToOtherMP(appliance: SimpleDeviceModel) {
  if (AfterServiceProductTypes.includes(appliance.type)) {
    // 获取故障信息
    let errorInfo: any = await getApplianceErrorInfo(appliance.haId, appliance.type)
    if (errorInfo && errorInfo.length > 1 && errorInfo[0].length > 0) {
      let descKey = ''
      let desc = ''
      descKey = errorInfo[0].join('；')
      desc = errorInfo[1].join('；')
      if (appliance.brand === 'BOSCH') {
        jumpMP(
          'wx9498873cd6c2028e',
          'pages/serviceModule/home/repairhousehold/main',
          { productmodal: appliance.vib, desc, descKey },
          'My.AfterService.Appliance.Bosch.Error.ToOtherPM'
        )
      } else {
        jumpMP(
          'wx00e2750add150103',
          'pages/serviceModule/home/repairhousehold/main',
          { productmodal: appliance.vib, desc, descKey },
          'My.AfterService.Appliance.Siemens.Error.ToOtherPM'
        )
      }
    } else {
      mpJump(appliance)
    }
  } else {
    mpJump(appliance)
  }
}

function mpJump(appliance: SimpleDeviceModel) {
  if (appliance.type === 'TT') {
    clickTTDevice.value = true
  } else if (appliance.brand === 'BOSCH') {
    jumpMP('wx9498873cd6c2028e', 'pages/serveHome/main', { hcCome: 1 }, 'My.AfterService.Appliance.Bosch.ToOtherPM')
  } else if (appliance.brand === 'SIEMENS') {
    jumpMP('wx00e2750add150103', 'pages/serveHome/main', { hcCome: 1 }, 'My.AfterService.Appliance.Siemens.ToOtherPM')
  } else if (appliance.type === 'HVN') {
    call('hvn')
  }
}
/**
 * 点击服务热线
 */
function callPhone() {
  callPhoneDialogFlag.value = true
}

/**
 * 点击空白处取消弹窗
 */
function cancel() {
  callPhoneDialogFlag.value = false
  clickTTDevice.value = false
}

/**
 * 博世 立即拨打
 */
function callBosch() {
  callPhoneDialogFlag.value = false
  call('bosch')
}

/**
 * 西门子立即拨打
 */
function callSiemens() {
  callPhoneDialogFlag.value = false
  call('siemens')
}

/**
 * TT即拨打
 */
function callTT() {
  callPhoneDialogFlag.value = false
  clickTTDevice.value = false
  call('tt')
}

/**
 * 拨打客服电话
 * @param brand 品牌
 */
function call(brand: string) {
  let isSiemens = brand == 'siemens'
  let isTT = brand == 'tt'
  let isHVN = brand == 'hvn'
  let phoneNumber = isSiemens ? '4008899999' : isTT ? '4008206017' : '4008855888'
  if (isHVN) {
    phoneNumber = '4008289898'
  }
  uni.makePhoneCall({
    phoneNumber: phoneNumber,
    success: function () {
      console.log('afterService.js', 'uni.makePhoneCall', '拨打电话成功！')
    },
    fail: function () {
      console.log('afterService.js', 'uni.makePhoneCall', '拨打电话失败！')
    },
  })
}
</script>

<style lang="less">
.TT-afterService-modal {
  .modal-body {
    padding: 0;
    line-height: 0;
  }
}
.after-service {
  // 设置
  .container {
    font-family: 'PingFang SC';
    font-style: normal;
    margin: 32rpx 0rpx;
  }

  .set-text-null {
    color: var(--dark-color);
    font-weight: 600;
    font-size: 48rpx;
    padding: 0 32rpx 32rpx;
  }
  // 顶部提示文案
  .top-tip {
    margin: 0rpx 32rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 80rpx;
    padding-bottom: 12rpx;
    .set-text {
      font-style: normal;
      font-weight: 600;
      font-size: 48rpx;
      color: var(--dark-color);
    }
  }
  // 服务热线
  .service-hotline {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    // 服务热线图片
    .left-image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }
    .right-text {
      font-size: 28rpx;
      font-weight: 500;
      color: var(--primary-color);
    }
  }

  // 家电列表
  .appliance-list {
    display: flex;
    flex-direction: column;
    margin: 24rpx 32rpx;
    .cell {
      height: 152rpx;
      background-color: #fff;
      display: flex;
      align-items: center;
      .left-icon {
        width: 102rpx;
        height: 114rpx;
        margin-left: 24rpx;
        margin-right: 28rpx;
        .alt-picture {
          width: 102rpx;
          height: 102rpx;
        }
      }
      .right-text {
        font-weight: 600;
        font-size: 36rpx;
        color: var(--dark-color);
      }
    }
  }

  .brand-phone-null {
    padding: 0 32rpx;
  }

  .brand-class {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 24rpx;
    height: 108rpx;
    background-color: #f4f4f6;

    .brand-icon {
      width: 220rpx;
      height: 88rpx;
    }
    .brand-iphone {
      font-size: 40rpx;
    }
  }
  .none-class {
    background-color: #fff;
  }
  .tt-class {
    margin-bottom: 20rpx;
    margin-top: 24rpx;
    text-indent: 0;
    .tt-text {
      color: var(--dark-color);
      font-size: 32rpx;
      font-weight: 400;
      line-height: 48rpx;
    }
    .tt-phone {
      display: inline-block;
      text-decoration: underline;
      font-weight: 400;
      font-size: 32rpx;
      color: var(--primary-color);
    }
  }

  .tt-phone-class {
    color: rgba(0, 0, 0, 0.6);
    margin-top: 44rpx;
    margin-bottom: 64rpx;
    font-weight: 400;
    font-size: 32rpx;
  }
  .call {
    font-weight: 500;
    font-size: 28rpx;
    color: var(--primary-color);
    margin-right: 16rpx;
  }
}
</style>
